<template>
	<view class="myWallet">
<!-- 		<title :center="true" title="我的钱包" iconSize="38" bgcolor="#FD9031" color="#FFF"
			@to-click="toBack(1)" icon="/static/img/other/to-back.png"></title> -->
		<title :center="true" title="我的钱包" iconSize="38" bgcolor="linear-gradient(45deg, #f43f3b, #ec008c)" color="#FFF"
			@to-click="toBack(1)" icon="/static/img/other/to-back.png"></title>
		<view class="walletBody">
			<view class="arrow a_le">
			</view>
			<view class="arrow a_ri">
			</view>
			<view class="bodyCon">
				<image src="../../static/img/other/form.png" mode="widthFix" class="ima"></image>
				<view class="tixian">
					可提现
				</view>
				<view class="tBtn" @click="toCash">
					<image src="../../static/img/other/ti.png" mode="aspectFill" class="icon"></image>
					<text>提现</text>
					<view class="iconfont icon--arrow-bottom trans">
					</view>
				</view>
				<view class="jine">
					￥{{account.balance}}
				</view>
				<view class="bottom">
					<view class="le">
						已到账:
						<view class="d">
							￥{{account.order_settled.profit}}
						</view>
					</view>
					<view class="ri">
						在路上:
						<view class="d">
							￥{{account.order_settling.profit}}
						</view>
					</view>
				</view>
			</view>
			<view class="condition">
				<view class="condition_left">
					<view class="total" v-for="(item,index) in type" :key='index' @click="choose(index)">
						<view :class="index == curIndex? 'type':'' ">
							{{item}}
							<view v-if="index == curIndex" class="line">
							</view>
						</view>
					</view>
				</view>
				<view class="condition_right">
					<!-- <picker mode="date" :value="data" fields="day" @change="bingChange" :start="rangeStart"
						:end="rangeEnd"> -->
						<view class="condition_right_but" @click="toMenu">
							{{picker.range.title}}
							<u-icon size="18" name="arrow-down-fill" style="margin-left: 8rpx;"></u-icon>
						</view>
					<!-- </picker> -->
				</view>
			</view>

			<view class="content" id="content">
				<view class="content_all" v-for="(item,index) in contentList" :key='index'>
					<view class="content_left">
						<view class="type view">
							{{item.mn}}
						</view>
						<text class="text t">{{item.orderno}}</text>
					</view>
					<view class="content_right" v-if="cash_type === 1">
						<view class="jine view red"  :style="{'color':item.status == 0 ? '#EF3B5D':'gray'}">
							￥{{item.price}}
						</view>
						<text class="text">{{item.created_at}}</text>
						<text class="text" v-if="item.status == 0">已到账</text>
						<text class="text" v-else-if="item.status == 1">已失效</text>
					</view>
					<view class="content_right" v-if="cash_type === 3">
						<view class="jine view red" :style="{'color':item.status == 0 ? '#EF3B5D':'gray'}">
							￥{{item.price}}
						</view>
						<text class="text">{{item.created_at}}</text>
						<text class="text" v-if="item.status == 0">在路上</text>
						<text class="text" v-else-if="item.status == 1">已失效</text>
					</view>
					<view class="content_right" v-if="cash_type === 2">
						<view class="jine view red">
							￥{{item.price}}
						</view>
						<text class="text">{{item.created_at}}</text>
						<text class="text">系统扣除</text>
					</view>
				</view>
			</view>
		</view>
		<!-- range 的弹出层 -->
		<view class="range_pupop" v-if='picker.range.isShow'>
			<view class="businessTime">
				交易时间
				<view class="all_title">
					<view class="sub_title" v-for="(item,i) in picker.range.other" :key='i'>
						<button class="botton" @click="chooseItem(1,i)">
							{{item}}
						</button>
					</view>
				</view>

			</view>
			<view class="custom">
				自定义
				<view class="chooseTime">
					<view class="chooseTime_title">
						<view class="d">
							<picker mode="date" :value="data" fields="day" @change="bindChange($event,0)"
								:start="picker.date.range[0]" :end="picker.date.range[1]">
								<view class="condition_right_but">
									{{picker.date.start}}
									<u-icon size="18" name="arrow-down-fill" style="margin-left: 8rpx;"></u-icon>
								</view>
							</picker>
						</view>
						<text> -</text>
						<view class="d">
							<picker mode="date" :value="data" fields="day" @change="bindChange($event,1)"
								:start="picker.date.range[0]" :end="picker.date.range[1]">
								<view class="condition_right_but">
									{{picker.date.end}}
									<u-icon size="18" name="arrow-down-fill" style="margin-left: 8rpx;"></u-icon>
								</view>
							</picker>
						</view>
					</view>

				</view>
			</view>
			<button type="default" class="btn" @click="confirm">确定</button>
		</view>
		<!-- 遮罩层 -->
		<view id="mask" :style="{height : height}" v-show="picker.range.isShow == true" class="mask" @click="cliMask">
		</view>
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	import moment from 'moment'
	import MxDatePicker from './components/mx-datepicker/mx-datepicker.vue'
	export default {
		data() {
			return {
				height:'',
				curIndex: 0,
				isLoad:true,
				// 流水类型 1：收入(已到账) 2：扣除（系统扣除） 3：在路上
				type: ['已到账', '在路上', '系统扣除'],
				account: "",
				timer: null,
				contentList: [],
				cash_type: 1,
				limit: 10,
				offset: 0,
				picker: {
					range: {
						title: "选择时间范围",
						other: ['近一月', '近三月', '近半年', '近一年'],
						current: 0,
						isShow: false
					},
					date: {
						showPicker: false,
						range: ['2017.01.01', '2019.01.31'],
						// 开始时间
						start: '',
						// 结束时间
						end: ''
					}
				},
			}
		},
		components: {
			title,
			MxDatePicker
		},
		onPageScroll(e) {
			let _this = this
			let content = uni.createSelectorQuery().select('#content')
			content.boundingClientRect((data) => {}).exec((res) => {
				_this.height = res[0].height + 129 + 'px'
			})
		},
		// 上拉加载
		onReachBottom() {
			this.offset = this.offset + 10
			this.getData()
		},
		onLoad(option) {
			this.account = JSON.parse(option.account)
			this.getTime()
			this.getData()
		},
		methods: {
			// 时间选择范围
			toMenu(){
				this.picker.range.isShow = true
			},
			// 选择条件
			// mold 0是type,1是range
			chooseItem(mold, index) {
				this.picker.range.current = index
				this.picker.range.title = this.picker.range.other[index]
				this.picker.range.isShow = false
				this.offset = 0
				this.contentList = []
				
				this.isLoad = true
				this.getData()
			},
			// 点击遮罩层
			cliMask() {
				this.picker.range.isShow = false
			},
			// 点击确认按钮
			confirm() {
				this.picker.range.isShow = false
				if (!moment(this.picker.date.start).isBefore(this.picker.date.end)) {
					let temp = this.picker.date.start
					this.picker.date.start = this.picker.date.end
					this.picker.date.end = temp
				}
				this.picker.range.title = this.picker.date.start + '-' + this.picker.date.end.replace(/\//g, '.')
				this.offset = 0
				this.contentList = []
				this.getData()
			},
			// 日期范围选择
			// i = 0,开始时间， i =1 结束时间
			bindChange(e, i) {
				if (i == 0) {
					this.picker.date.start = e.detail.value.replace(/-/g, '.')
				} else {
					this.picker.date.end = e.detail.value.replace(/-/g, '.')
				}
				// console.log(this.picker.date.start, 'fdssafdasfdasdf', this.picker.date.end)
			},
			// 获取当前时间
			getTime() {
				let date = new Date();
				let year = date.getFullYear(); //获取完整的年份(4位)
				let month = date.getMonth() * 1 + 1; //获取当前月份(0-11,0代表1月)
				let day = date.getDate(); //获取当前日(1-31)
				let time = year + '.' + month + '.' + day
				let beforeTime = moment().subtract('days', 90).format('YYYY.MM.DD')
				// this.picker.date.range[0] = beforeTime
				this.picker.date.start = beforeTime
				this.picker.date.range[1] = this.picker.date.end = time
				console.log(this.picker.date.range[0], this.picker.date.range[1])
			},

			// 返回
			toBack(i) {
				uni.navigateBack({
					delta: i
				})
			},
			// 提现
			toCash() {
				uni.navigateTo({
					url: '../cash/cash?' + 'account=' + JSON.stringify(this.account)
				})
			},
			// 条件选择
			choose(i) {
				this.curIndex = i
				if (i == 0) {
					this.cash_type = 1
				} else if (i == 1) {
					this.cash_type = 3
				} else {
					this.cash_type = 2
				}
				this.offset = 0
				this.contentList = []
				this.isLoad = true
				this.getData()
			},
			// // 日期范围选择
			// bingChange(e) {
			// 	console.log(e)
			// 	this.data = this.start = this.end = e.detail.value;
			// 	this.offset = 0
			// 	this.contentList = []
			// 	this.getData()
			// },
			// 请求数据
			getData() {
				if(this.isLoad){
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					let start = ""
					let end = ""
					let data = {
						cash_type: this.cash_type,
						limit: this.limit,
						offset: this.offset,
					}
					// 时间范围的条件赋值
					if (this.picker.range.title != '选择时间范围') {
						if (this.picker.range.title == '近一月') {
							start = moment().subtract('days', 30).format('YYYY-MM-DD')
							end = moment().format("YYYY-MM-DD")
							console.log(start + '---' + end)
						} else if (this.picker.range.title == '近三月') {
							start = moment().subtract('days', 90).format('YYYY-MM-DD')
							end = moment().format("YYYY-MM-DD")
							console.log(start + '---' + end)
						} else if (this.picker.range.title == '近半年') {
							start = moment().subtract('days', 180).format('YYYY-MM-DD')
							end = moment().format("YYYY-MM-DD")
							console.log(start + '---' + end)
						} else if (this.picker.range.title == '近一年') {
							start = moment().subtract('days', 365).format('YYYY-MM-DD')
							end = moment().format("YYYY-MM-DD")
							console.log(start + '---' + end)
						} else {
							let a = this.picker.range.title.split('-')
							// console.log(a)
							start = a[0].replace(/\./g, '-')
							end = a[1].replace(/\./g, '-')
						}
						data.start = start
						data.end = end
					}
					this.$api.getMyCash(data).then(res => {
						// status: 0 已到账（成功） 1（失败） 
						uni.hideLoading()
						if (res) {
							if (res.data.data.length > 0) {
								this.contentList = [...this.contentList, ...res.data.data]
								// console.log(this.contentList)
							} else {
								this.isLoad = false
								uni.showToast({
									title: '没有数据了',
									icon: 'none'
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myWallet {
		.walletBody {
			position: relative;
			width: 750rpx;
			height: 465rpx;
			background: linear-gradient(45deg, #f43f3b, #ec008c);
			padding: 24rpx;
			padding-top: 173rpx;

			.arrow {
				position: absolute;
				bottom: -20rpx;
				width: 0;
				height: 0;
				border-top: 25rpx solid transparent;
				border-bottom: 25rpx solid transparent;
				border-left: 25rpx solid #FF3366;
				z-index: 1;
			}

			.a_le {
				left: 0;
			}

			.a_ri {
				border-left: none;
				border-right: 25rpx solid #EE1570;
				right: 0;
			}

			.bodyCon {
				position: relative;
				width: 702rpx;
				height: 346rpx;
				background: linear-gradient(0deg, #FEFBFB 0%, #FBDEDF 100%);
				box-shadow: 0px 0px 24rpx 0rpx rgba(238, 161, 168, 0.57);
				border-radius: 8rpx;
				padding: 38rpx;

				.ima {
					position: absolute;
					width: 100%;
					bottom: 0;
					left: 0;
					z-index: 1;
				}

				.tBtn {
					position: absolute;
					font-size: 26rpx;
					color: #FFFFFF;
					right: 0;
					top: 39rpx;
					width: 152rpx;
					height: 64rpx;
					background: #EF3B5D;
					border-radius: 27px 0px 0px 27px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-left: 30rpx;
					padding-right: 8rpx;

					.trans {
						display: inline-block;
						transform: rotate(-90deg);
						font-size: 20rpx;
					}

					.icon {
						width: 24rpx;
						height: 24rpx;
						color: white;
					}
				}

				.tixian {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #666666;
				}

				.jine {
					font-size: 50rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #EF3B5D;
					margin-top: 23rpx;
					margin-bottom: 63rpx;
				}

				.bottom {
					display: grid;
					grid-template-row: auto;
					grid-template-columns: auto auto;
					grid-gap: 0 70rpx;
					grid-auto-flow: row;
					font-size: 26rpx;
					font-weight: bold;
					color: #666666;

					.d {
						font-size: 26rpx;
						font-weight: 500;
						color: #EF3B5D;
						margin-top: 21rpx;
					}
				}

			}

			.condition {
				padding-top: 45rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.condition_left {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.total {
						margin-right: 25rpx;
						font-size: 26rpx;
						color: #666666;

						.type {
							position: relative;
							font-size: 33rpx;
							color: #EF3B5D;
							font-weight: bold;

							.line {
								position: absolute;
								height: 6rpx;
								width: 40rpx;
								left: 50%;
								transform: translate(-50%);
								bottom: -20rpx;
								background-color: #f1255d;
							}
						}
					}
				}

				.condition_right_but {
					padding: 8rpx 25rpx;
					background: #F6F6F6;
					border-radius: 2rpx;
					font-size: 26rpx;
					color: #999999;
				}
			}

			.content {
				margin-top: 30rpx;

				// padding: 0 24rpx 0 24rpx;
				.content_all {
					padding: 21rpx 0 21rpx 0;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #F1F1F1;

					.content_right {
						text-align: end;
					}

					.text {
						font-size: 24rpx;
						color: #999999;
						margin-left: 15rpx;
					}

					.t {
						margin-left: 0;
					}

					.view {
						font-size: 30rpx;
						color: #333333;
					}

					.red {
						color: #EF3B5D;
					}
					.gray{
						color: #333333;
					}
				}
			}
		}

		// range
		.range_pupop {
			position: fixed;
			background-color: white;
			width: 100%;
			bottom: 0;
			z-index: 1000;
			padding: 35rpx;
			font-size: 26rpx;
			color: #666666;

			.businessTime {
				margin-bottom: 50rpx;

				.all_title {
					display: grid;
					grid-template-rows: auto;
					grid-template-columns: auto auto auto auto;
					justify-content: start;
					grid-gap: 20rpx;
					margin-top: 30rpx;

					.sub_title {
						.botton {
							width: 150rpx;
							padding-left: 14rpx;
							padding-right: 14rpx;
							cursor: pointer;
							font-size: 26rpx;
							border-color: black;
							border-radius: 5rpx;
						}
					}
				}
			}

			.custom {
				.chooseTime {
					.chooseTime_title {
						margin-top: 30rpx;
						display: grid;
						grid-template-columns: auto auto auto;
						grid-template-rows: auto;

						.d {
							width: 220rpx;
							height: 60rpx;
							border-radius: 8rpx;
							text-align: center;
							line-height: 60rpx;
							background-color: #f0f0f0;
						}
					}

				}

			}

			.btn {
				width: 650rpx;
				height: 88rpx;
				background: linear-gradient(91deg, #EF4447 0%, #EF298A 100%);
				border-radius: 44px;
				font-weight: 500;
				font-size: 32rpx;
				color: #FEFEFE;
				margin-top: 40rpx;
			}
		}

		//遮罩层 
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			z-index: 999;
			background: rgba(0, 0, 0, .2);
		}
	}
</style>
